<template>
  <div class="news">
    <div class="box">
      <div class="news-banner">
        <div class="banner-title">
          <h2>联系我们</h2>
          <h3>让您快速找到我们</h3>
        </div>
        
      </div>
      <div class="about-container">
			<div class="about-cont">
				<div class="about-left">
					<div class="about-title">
						<h3>联系我们</h3>
						<h2>CONTACTS US</h2>
					</div>
					<div class="about-contacts" >
						<div v-html="contactContent"></div>
					</div>
				</div>
				<div class="about-right">
					<div id="allmap" style="width: 100%; height: 450px;"></div>
				</div>
			</div>
        
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { getColumnInfo } from "@/api/column";
const activeKey = ref("1");
const newsItems = ref<any>([]);
const singlePage = ref(false);
const recomNews = ref<Array<any>>([]);
const loading = ref<boolean>(false);
let contactContent = ref();



onMounted(async () => {
  initMap();
  await getColumnContent();
});

async function getColumnContent() {
  const columnContent: any = await getColumnInfo("1979372466862256129");
	contactContent.value = columnContent.result.content;
  
}

function initMap() {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = `https:////api.map.baidu.com/getscript?type=webgl&v=1.0&ak=kuAsBZklNlkYvgQeMdR9i1g5DrfHU1HA`; // 注意替换`你的API_KEY`为你的实际API Key
      script.onload =()=>{
		  createMap()
	  }
	  document.body.appendChild(script);
    }
function  createMap() {
      var map = new BMapGL.Map("allmap");
		var point = new BMapGL.Point(114.706602, 38.024303);
		map.centerAndZoom(point, 15);
		map.enableScrollWheelZoom(true);
		var marker = new BMapGL.Marker(point);
		map.addOverlay(marker);
		var opts = {
			width : 230,
			height: 120,
			title : "河北省职业技能公共实训基地" ,
		}
		var infoWindow = new BMapGL.InfoWindow('<p>地址：石家庄市藁城区经济技术开发区赣江路9号</p><p>电话： 0311-67163583</p>', opts);
		marker.addEventListener("click", function(){
			map.openInfoWindow(infoWindow, point);
		});
		marker.openInfoWindow(infoWindow);
    }


</script>
<style lang="less" scoped>
@hover_color: #3370ff;

.news_header {
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
}


.news-banner {
  width: 100%;
  height: 160px;
  background: url("../../assets/img/news/newsbanner.jpg") 50% no-repeat;
  background-size: cover;
  text-align: center;
  padding-top: 30px;

  .banner-title {
    padding-bottom: 30px;

    h2 {
      font-size: 28px;
      line-height: 60px;
      font-weight: 600;
    }

    h3 {
      color: #828282;
      margin-top: 5px;
      font-size: 100%;
      font-weight: 400;
      font-variant: normal;
    }
  }
}

.about-container {
  max-width: 1200px;
  min-height: 480px;
  margin: 20px auto;
  padding:20px;
  background:#ffffff;
  border-radius:16px;
  .about-cont{
	  overflow:hidden;
	  .about-left{
		  width:30%;
		  float:left;
		  .about-title{
			  padding:30px;
			  background-color:#3585f4;
			  border-radius:16px;
			  h3{
				  color:#ffffff;
				  font-size:20px;
			  }
			  h2{
				  margin-top:35px;
				  color:#ffffff;
				  font-size:28px;
				  color:#efefef;
			  }
		  }
		  .about-contacts{
			  margin-top:20px;
			  
		  }
	  }
	  .about-right{
		  width:65%;
		  float:right;
	  }
  }
}





</style>
